import { VirtualMobile, VirtualMobileContext } from "components/virtualMobile";
import { MobilePage } from "components/mobilePage";
import { UserPage as UserPage } from 'user/application';
import { loadControlCSS } from "admin/controls/utiltiy";
import { MemberService } from "user/services/memberService";
import React = require("react");
import ReactDOM = require("react-dom");

loadControlCSS('mobilePageDisplay');

interface Props extends React.Props<MobilePageDisplay> {
    pageData: PageData,
    // style?: React.CSSProperties,
    displayMobile?: boolean,
    scale?: number,
    enableMock?: boolean,

    // 外壳的颜色，和页面 style 颜色无关
    color?: string,
}
interface State {
    pageData: PageData,
    styleColor?: StyleColor
}
export class MobilePageDisplay extends React.Component<Props, State>{

    virtualMobile: VirtualMobile;
    mobilePage: MobilePage;
    // styleColor: StyleColor;
    // pageData: PageData;

    constructor(props: Props) {
        super(props);
        this.state = { pageData: props.pageData };
        // this.pageData = this.props.pageData;
    }
    changeStyle(style: StyleColor): any {
        this.setState({ styleColor: style })
        this.virtualMobile.userApp.currentPage.reload();
        this.virtualMobile.userApp.loadStyleCSS(style);
    }
    changePageData(pageData: PageData) {
        // this.pageData = pageData;
        this.setState({ pageData })
        this.virtualMobile.userApp.currentPage.reload();
    }

    // async userPageRender(page: UserPage) {
    //     let pageData = this.pageData;
    //     let member = page.createService(MemberService);
    //     if (!this.styleColor) {
    //         let store = await member.store();
    //         this.styleColor = store.Style || 'default';
    //     }
    //     ReactDOM.render(<MobilePage key={pageData.id} pageData={pageData}
    //         styleColor={this.styleColor}
    //         elementPage={page}
    //         ref={(e) => this.mobilePage = e || this.mobilePage}
    //     />, page.element);
    // }

    render() {
        let { pageData, styleColor } = this.state
        return <VirtualMobile {...this.props}
            ref={(e) => this.virtualMobile = e || this.virtualMobile}>
            <VirtualMobileContext.Consumer>
                {args => {
                    return <MobilePage
                        pageData={pageData}
                        styleColor={styleColor || args.storeColor}
                        elementPage={args.page}
                    />
                }}
            </VirtualMobileContext.Consumer>
        </VirtualMobile>
    }
}

